<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一篇博客文章 - 我的个人博客</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>我的博客</h1>
            <nav>
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="blog.html">文章</a></li>
                    <li><a href="about.html">关于我</a></li>
                    <li><a href="contact.html">联系方式</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container post-page">
        <article class="blog-post">
            <header class="post-header">
                <h2 class="post-title">第一篇博客文章</h2>
                <div class="post-meta">
                    <span class="post-date">发布于：2023年11月15日</span>
                    <span class="post-category">分类：技术</span>
                    <span class="post-author">作者：[你的名字]</span>
                </div>
            </header>

            <div class="post-featured-image">
                <img src="images/placeholder.jpg" alt="文章特色图片">
            </div>

            <div class="post-content">
                <p>这是我博客的第一篇文章，我将在这里分享一些关于web开发的心得体会。</p>
                
                <h3>第一部分：Web开发基础</h3>
                <p>Web开发是一个广泛的领域，主要包括前端开发和后端开发两大部分。前端开发主要关注用户界面和用户体验，使用HTML、CSS和JavaScript等技术；后端开发则负责服务器端的逻辑处理，可以使用各种编程语言如PHP、Python、Java等。</p>
                
                <p>对于初学者来说，首先需要掌握以下几方面的基础知识：</p>
                <ul>
                    <li>HTML（超文本标记语言）：用于创建网页的结构和内容</li>
                    <li>CSS（层叠样式表）：用于设计网页的外观和布局</li>
                    <li>JavaScript：为网页添加交互功能</li>
                </ul>
                
                <h3>第二部分：前端框架</h3>
                <p>随着Web应用的复杂性增加，各种前端框架应运而生，如React、Vue.js和Angular等。这些框架提供了组件化开发、状态管理等功能，大大提高了开发效率和代码可维护性。</p>
                
                <blockquote>
                    <p>"学习一个框架很容易，但理解其背后的原理才是真正重要的。"</p>
                </blockquote>
                
                <p>以下是一个简单的React组件示例：</p>
                
                <pre><code class="language-jsx">
import React from 'react';

function Welcome(props) {
  return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;;
}

export default Welcome;
                </code></pre>
                
                <h3>第三部分：响应式设计</h3>
                <p>随着移动设备的普及，响应式设计变得越来越重要。响应式设计是指网页能够自动适应不同设备屏幕大小的设计方法。</p>
                
                <p>一个常用的实现方式是使用CSS媒体查询：</p>
                
                <pre><code class="language-css">
/* 适用于小屏幕设备 */
@media (max-width: 767px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
}

/* 适用于平板设备 */
@media (min-width: 768px) and (max-width: 991px) {
  .container {
    width: 750px;
  }
}

/* 适用于桌面设备 */
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
                </code></pre>
                
                <h3>总结</h3>
                <p>Web开发是一个不断变化和发展的领域，需要开发者持续学习和更新知识。希望这篇文章能够为初学者提供一些指导，在未来的文章中，我将深入探讨更多Web开发相关的话题。</p>
            </div>

            <div class="post-tags">
                <span class="tag-label">标签：</span>
                <a href="#" class="tag">Web开发</a>
                <a href="#" class="tag">HTML</a>
                <a href="#" class="tag">CSS</a>
                <a href="#" class="tag">JavaScript</a>
                <a href="#" class="tag">前端</a>
            </div>

            <div class="post-navigation">
                <div class="post-nav-prev">
                    <span>上一篇</span>
                    <a href="#">没有更早的文章</a>
                </div>
                <div class="post-nav-next">
                    <span>下一篇</span>
                    <a href="post2.html">第二篇博客文章</a>
                </div>
            </div>

            <div class="post-comments">
                <h3>评论区</h3>
                <div class="comment-form">
                    <h4>发表评论</h4>
                    <form id="commentForm">
                        <div class="form-group">
                            <label for="commentName">您的名字</label>
                            <input type="text" id="commentName" name="name" required>
                        </div>
                        <div class="form-group">
                            <label for="commentEmail">您的邮箱</label>
                            <input type="email" id="commentEmail" name="email" required>
                        </div>
                        <div class="form-group">
                            <label for="commentContent">评论内容</label>
                            <textarea id="commentContent" name="content" rows="4" required></textarea>
                        </div>
                        <button type="submit" class="btn">提交评论</button>
                    </form>
                </div>
                
                <div class="comments-list">
                    <div class="comment">
                        <div class="comment-avatar">
                            <img src="images/avatar.jpg" alt="评论者头像">
                        </div>
                        <div class="comment-content">
                            <div class="comment-info">
                                <span class="comment-author">张三</span>
                                <span class="comment-date">2023年11月16日</span>
                            </div>
                            <p>非常棒的文章，对Web开发的介绍很全面，期待更多内容！</p>
                            <a href="#" class="comment-reply">回复</a>
                        </div>
                    </div>
                    
                    <div class="comment">
                        <div class="comment-avatar">
                            <img src="images/avatar.jpg" alt="评论者头像">
                        </div>
                        <div class="comment-content">
                            <div class="comment-info">
                                <span class="comment-author">李四</span>
                                <span class="comment-date">2023年11月15日</span>
                            </div>
                            <p>我是前端开发新手，这篇文章对我帮助很大，谢谢分享！</p>
                            <a href="#" class="comment-reply">回复</a>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </main>

    <aside class="sidebar">
        <div class="container">
            <div class="widget">
                <h3 class="widget-title">最新文章</h3>
                <ul class="recent-posts">
                    <li><a href="post1.html">第一篇博客文章</a></li>
                    <li><a href="post2.html">第二篇博客文章</a></li>
                    <li><a href="post3.html">第三篇博客文章</a></li>
                </ul>
            </div>
            
            <div class="widget">
                <h3 class="widget-title">分类</h3>
                <ul class="categories">
                    <li><a href="#">技术 (5)</a></li>
                    <li><a href="#">生活 (3)</a></li>
                    <li><a href="#">旅行 (2)</a></li>
                    <li><a href="#">阅读 (1)</a></li>
                </ul>
            </div>
            
            <div class="widget">
                <h3 class="widget-title">标签云</h3>
                <div class="tag-cloud">
                    <a href="#" class="tag">Web开发</a>
                    <a href="#" class="tag">HTML</a>
                    <a href="#" class="tag">CSS</a>
                    <a href="#" class="tag">JavaScript</a>
                    <a href="#" class="tag">React</a>
                    <a href="#" class="tag">Vue</a>
                    <a href="#" class="tag">前端</a>
                    <a href="#" class="tag">后端</a>
                    <a href="#" class="tag">设计</a>
                </div>
            </div>
        </div>
    </aside>

    <footer>
        <div class="container">
            <p>&copy; 2023 我的个人博客. 保留所有权利.</p>
            <div class="social-links">
                <a href="#" class="social-link">微博</a>
                <a href="#" class="social-link">知乎</a>
                <a href="#" class="social-link">GitHub</a>
            </div>
        </div>
    </footer>

    <script src="js/script.js"></script>
</body>
</html> 